<style lang="less" scoped>
.alarm-img {
  display: block;
  max-width: 100%;
}
</style>
<template>
  <div class="comp-new">
    <el-form
      ref="handleForm"
      :model="handleForm"
      :label-width="110 * scale + 'px'"
    >
      <el-form-item label="设备名称：">{{ activeData.deviceName }}</el-form-item>
      <el-form-item label="所属单位：">{{
        activeData.businessName
      }}</el-form-item>
      <el-form-item label="设备编码：">{{ activeData.number }}</el-form-item>
      <el-form-item label="报警类型：">{{
        activeData.alarmTypeName
      }}</el-form-item>
      <el-form-item label="报警内容：">{{ activeData.content }}</el-form-item>
      <el-form-item label="报警地址：">{{ activeData.position }}</el-form-item>
      <el-form-item label="报警时间：">{{ activeData.alarmtime }}</el-form-item>
      <!-- <el-form-item label="原因：">{{activeData.alarmTypeName}}</el-form-item>
			<el-form-item label="描述：">{{activeData.content}}</el-form-item> -->
      <el-form-item label="报警图片：" v-if="activeData.AlarmImg">
        <!-- <img class="alarm-img" :src="activeData.AlarmImg" /> -->
        <el-image
          class="alarm-img"
          :src="activeData.AlarmImg"
          :preview-src-list="[activeData.AlarmImg]"
        >
        </el-image>
      </el-form-item>
      <template v-if="activeData.deviceClassify == '19'">
        <el-form-item label="开关列表："> </el-form-item>
        <div class="pl-15 mb-20">
          <el-table
            class="reverse"
            :data="switchList"
            style="width: 100%;"
            v-loading="switchLoading"
          >
            <el-table-column
              prop="name"
              label="设备名称"
              min-width="60"
            ></el-table-column>
            <el-table-column prop="currentstate" label="状态" width="60">
              <template slot-scope="scope">
                <span
                  class="switch-status"
                  v-if="scope.row.currentstate == 1"
                ></span>
                <span class="switch-status close" v-else></span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <hr class="splitter mb-20" />
      <template v-if="!activeData.isHandle">
        <el-form-item label="信息确认：">
          <el-radio-group v-model="handleForm.infoconfirm">
            <el-radio label="1">报警</el-radio>
            <el-radio label="2">误报</el-radio>
            <el-radio label="3">测试</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="批处理：">
          <el-checkbox v-model="handleForm.batchHandle"
            >是否批处理改设备警情</el-checkbox
          >
        </el-form-item>
        <el-form-item
          label="处置人员："
          prop="handlePerson"
          :rules="[
            { required: true, message: '请输入处置人员', trigger: 'change' },
          ]"
        >
          <el-input
            placeholder="请输入"
            v-model.trim="handleForm.handlePerson"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input
            placeholder="请输入"
            type="textarea"
            v-model.trim="handleForm.handleRemark"
          ></el-input>
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item label="处置时间：">
          {{ activeData.handletime }}
        </el-form-item>
        <el-form-item label="信息确认：">
          {{
            activeData.infoconfirm == 1
              ? "报警"
              : activeData.infoconfirm == 2
              ? "误报"
              : activeData.infoconfirm == 3
              ? "测试"
              : ""
          }}
        </el-form-item>
        <el-form-item label="批处理：">
          {{ activeData.batchHandle ? "是" : "否" }}
        </el-form-item>
        <el-form-item label="处置人员：">
          {{ activeData.handlePerson }}
        </el-form-item>
        <el-form-item label="备注：">
          {{ activeData.handleRemark }}
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "newRecordAccount",
  props: {
    activeData: {
      type: Object,
      default() {
        return null;
      },
    },
    alarmDevice: {
      type: Object,
      default() {
        return {};
      },
    },
    scale: {
      type: Number,
      default: 1,
    },
    isAutoClose: {
      type: Boolean,
      default: false,
    },
  },
  computed: {},
  watch: {
    activeData() {
      this.initForm();
    },
    checkedPermission(val) {},
  },
  data() {
    return {
      handleForm: {
        infoconfirm: "1",
        id: this.activeData.id,
        deviceClassify: this.activeData.deviceClassify,
        batchHandle: false,
      },
      switchList: [],
      switchLoading: false,
    };
  },
  created() {
    if (this.activeData.deviceClassify == "19") {
      this.getSwitch();
    }
    if (this.isAutoClose) {
      this.timer = setTimeout(() => {
        this.$emit("autoClose", this.activeData);
      }, 600000);
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  methods: {
    getDeviceDetail(cbk) {
      this.$get("/fireFightingIOT/device/detail", {
        id: this.activeData.deviceId,
        deviceClassify: this.activeData.deviceClassify,
      })
        .then((res) => {
          cbk && cbk(res.data.transDeviceCode);
        })
        .catch((err) => {
          this.switchLoading = false;
          if (err.msg) {
            this.$message.error(err.msg);
          }
        });
    },
    getSwitch() {
      this.switchLoading = true;
      this.getDeviceDetail((transDeviceCode) => {
        this.$get("/fireFightingIOT/switch/deviceSwitchList", {
          transDeviceCode,
        }).then(
          (res) => {
            this.switchLoading = false;
            this.switchList = res.data;
          },
          (err) => {
            this.switchLoading = false;
            this.switchList = [];
            if (err.msg) {
              this.$message.error(err.msg);
            }
          }
        );
      });
    },
    closeDoor() {
      this.$ajax({
        url: "/fireFightingIOT/device/remoteClosing",
        method: "post",
        data: {
          deviceIndexCode: this.alarmDevice.deviceIndexCode,
          channelIndexCode: this.alarmDevice.channelIndexCode,
        },
      }).then(
        (data) => {
          this.$message.success("操作成功");
          this.$emit("closeDoor", data);
        },
        (error) => {
          this.$emit("fail");
          if (error.msg) {
            this.$message.error(error.msg);
          }
        }
      );
    },
    submitAction() {
      this.$refs["handleForm"].validate((valid) => {
        if (valid) {
          this.$emit("submitting");
          let params = Object.assign({}, this.handleForm);
          this.$ajax({
            url: "/fireFightingIOT/historicalAlarmInfo/typeHandle",
            method: "post",
            data: params,
          }).then(
            (data) => {
              this.$message({
                type: "success",
                message: "处置完成",
                center: true,
              });
              this.$emit("success", data);
            },
            (error) => {
              this.$emit("fail");
              if (error.msg) {
                this.$message.error(error.msg);
              }
            }
          );
        } else {
          return false;
        }
      });
    },
  },
};
</script>
